<template>
  <div>
    <!--   导航栏   -->
    <TopHeader></TopHeader>
    <!--   白色标题   -->
    <div class="individual">
      <div class="individual-main flex">
        <img src="@/assets/images/personal/personal.png">
        <div class="individual-text">应急周转申请</div>
      </div>
    </div>

    <!--   申请书主体部分   -->
    <div>
      <!--   申请书的标题   -->
      <div class="main-title">柳州市中小工业企业应急周转资金申请书</div>
      <!--   中间表单   -->
      <div>
        <div class="main-form">
          <div class="manage">
            <el-form :model="form"> <!-- 规则校验 -->
              <!--第一行输入-->
              <div class="flex">
                <div class="input-name">
                  <el-form-item class="margin-right flex" label="申请企业名称" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="input-man">
                  <el-form-item class="margin-right flex" label="法定代表人" prop="number">
                    <el-input v-model="form.number" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="input-address">
                  <el-form-item class="flex" label="企业地址" prop="gender">
                    <el-input v-model="form.gender" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
              </div>

              <!--第二行输入-->
              <div class="flex">
                <div class="input-manage">
                  <el-form-item class="flex margin-right" label="经办人" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="input-phone">
                  <el-form-item class="flex margin-right" label="经办人电话" prop="number">
                    <el-input v-model="form.number" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="input-former">
                  <el-form-item class="flex margin-right" label="原贷款银行" prop="gender">
                    <el-input v-model="form.gender" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="input-number">
                  <el-form-item class="flex" label="还款账号" prop="gender">
                    <el-input v-model="form.gender" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
              </div>

              <!--第三行输入-->
              <div class="flex">
                <div class="input-money">
                  <el-form-item class="flex money" label="到期贷款金额" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="input-money">
                  <el-form-item class="flex margin-right" label="万元" prop="name"></el-form-item>
                </div>
                <div class="input-time">
                  <el-form-item class="flex margin-right" label="到期日期" prop="number">
                    <el-input v-model="form.number" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="input-ensure">
                  <el-form-item class="flex margin-right" label="贷款担保措施" prop="gender">
                    <el-input v-model="form.gender" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="input-repay">
                  <el-form-item class="flex money" label="自筹还贷资金" prop="gender">
                    <el-input v-model="form.gender" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item class="flex" label="元" prop="gender"></el-form-item>
                </div>
              </div>

              <!--第四行输入-->
              <div class="flex">
                <div>
                  <el-form-item style="margin-right: 20px" class="flex" label="申请借款金额" prop="name"></el-form-item>
                </div>
                <div class="input-application">
                  <el-form-item class="flex money" label="人民币（大写）" prop="name" >
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="input-application">
                  <el-form-item class="flex" label="万元整"></el-form-item>
                </div>
                <div class="input-application">
                  <el-form-item class="flex money" label="￥">
                    <el-input v-model="form.number" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
                <div class="input-application">
                  <el-form-item class="flex" label="元"></el-form-item>
                </div>
              </div>

              <!--申请理由-->
              <div class="reason">
                <div>
                  <div>
                    本企业因短期资金周转困难，无法自筹资金归还上述即将到期的担保贷款，现特申请用柳州市中小工业企业应急周转资金为本企业偿还上述到期贷款。 为确保贵中心该笔应急周转资金的安全发放和
                  </div>
                  <div class="flex">
                    <div>顺利收回，我公司</div>
                    <div class="input-u1">
                      <el-form-item class="flex" label="" prop="gender">
                        <el-input v-model="form.gender" autocomplete="off"></el-input>
                      </el-form-item>
                    </div>
                    <div>担保有限公司及反担保方（人）与贵中心签订《应急周转资金借款协议》， 由</div>
                    <div  class="input-u2">
                      <el-form-item class="flex" label="" prop="gender">
                        <el-input v-model="form.gender" autocomplete="off"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      担保有限公司代本企业借用柳州市中小工业企业应急周转资金
                    </div>
                    <div class="input-u3">
                      <el-form-item class="flex" label="" prop="gender">
                        <el-input v-model="form.gender" autocomplete="off"></el-input>
                      </el-form-item>
                    </div>
                    <div>万元， 该笔资金专项用</div>
                  </div>
                  <div class="flex">
                    <div>于</div>
                    <div  class="input-u4">
                      <el-form-item class="flex" label="" prop="gender">
                        <el-input v-model="form.gender" autocomplete="off"></el-input>
                      </el-form-item>
                    </div>
                    <div>担保有限公司为本企业担保的上述到期担保贷款。 本企业承诺：本企</div>
                    <div class="input-u5">
                      <el-form-item class="flex" label="" prop="gender">
                        <el-input v-model="form.gender" autocomplete="off"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      担保有限公司代借到贵中心的该笔资金后将按《应急周转资金借款协议》约定的时间内及时归还所借资金并
                    </div>
                  </div>
                  <div>支付相关费用，如未按时履约，愿承担相应的法律责任。</div>
                </div>
                <!--签字和时间-->
                <div style="height: 50%;float: right;margin-top: 17px">
                  <div class="flex">
                    <div style="margin-right: 60px">企业法定代表人（签字）</div>
                    <div>（盖章）</div>
                  </div>
                  <!--时间-->
                  <div style="float: right;margin-right: 30px;margin-top: 10px;" class="flex">
                    <div style="margin-right: 20px">年</div>
                    <div>月</div>
                  </div>
                </div>

              </div>
            </el-form>
          </div>
        </div>
      </div>
      <!--   保存   -->
      <div class="form-save">
        <el-row>
          <el-button type="primary">保存</el-button>
        </el-row>
      </div>


    </div>
  </div>
</template>

<script>
import TopHeader from "@/components/header/header";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "application",
  data() {
    return {
      form: {
        name: '',  // 姓名
        number: '',  // 身份证号
        business:'',  // 企业名称
        mailbox:'',  // 邮箱
        account: '',  // 相关账号
        gender: '',  // 性别
        credit: '',  // 信用代码
        phone: '',  // 手机号码
      },
    }
  },
  mounted() {
    this.watermark.set("张万志")//页面添加水印，暂时写死，等与后端交互，水印要对应当前登录用户的真实姓名
  },
  components: {
    TopHeader
  },
}
</script>

<style lang="less" scoped>

.individual {
  width: 100%;
  height: 106px;
  background-color: rgba(230, 238, 248, 1);


  .individual-main {
    align-items: center;
    padding: 26px 0 33px 290px;
    white-space:nowrap;

    .individual-text {
      padding-left: 30px;
      font-size: 30px;
      color: rgba(80, 80, 80, 1);
    }
  }
}
.individual img {
  width: 50px;
  height: 50px;
}
.flex {
  display: flex;
}
.main-title {
  font-size: 14px;
  color: rgba(80, 80, 80, 1);
  letter-spacing: 2px;
  width: 100%;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px
}
.main-form {
  width: 1320px;
  height: 636px;
  background-color: rgba(222, 238, 250, 1);
  margin: 0 auto;
  border-radius: 16px;
}
.margin-right {
  margin-right: 50px
}

::v-deep .el-form-item__label{
  font-size: 14px;
  color: rgba(80, 80, 80, 1);

}
::v-deep .el-input__inner{
  height: 30px;
  color: rgba(80, 80, 80, 1);
  background-color: rgba(255, 255, 255, 1);
  font-size: 12px;
  border-radius: 0;
  padding: 5px 5px;
}
.manage {
  padding: 20px 20px;

  // 第一行输入
  .input-name ::v-deep .el-input__inner {
    width: 214px;
  }
  .input-man ::v-deep .el-input__inner {
    width: 132px;
  }
  .input-address ::v-deep .el-input__inner {
    width: 510px;
  }

  // 第二行输入
  .input-manage ::v-deep .el-input__inner {
    width: 76px;
  }
  .input-phone ::v-deep .el-input__inner {
    width: 125px;
  }
  .input-former ::v-deep .el-input__inner {
    width: 214px;
  }
  .input-number ::v-deep .el-input__inner {
    width: 214px;
  }

  // 第三行输入
  .input-money ::v-deep .el-input__inner {
    width: 129px;
  }
  .input-time ::v-deep .el-input__inner {
    width: 160px;
  }
  .input-ensure ::v-deep .el-input__inner {
    width: 214px;
  }
  .input-repay ::v-deep .el-input__inner {
    width: 82px;
  }
  // 第四行输入
  .input-application ::v-deep .el-input__inner{
    width: 65px;
  }
}
.reason {
  height: 194px;
  border: 2px solid;
  font-size: 14px;
}
.reason>div:nth-child(1) {
  height: 50%;
  padding: 10px 10px;
}
::v-deep .el-button {
  font-size: 20px;
  background-color:rgba(92, 150, 215, 1);
  color: rgba(255, 255, 255, 1);
  width: 192px;
  height: 54px;
  border-radius: 15px;
}
.form-save {
  background-color:rgba(92, 150, 215, 1);
  color: rgba(255, 255, 255, 1);
  width: 192px;
  height: 54px;
  margin: 30px auto;
  text-align: center;
  border-radius: 15px;
  font-size: 20px;
}
.money {
  margin-right: 10px;
}
.input-u1 ::v-deep .el-input__inner{
  width: 47px;
  height: 17px;
  padding: 2px;
  position: relative;
  bottom: 9px;
}
.input-u2 ::v-deep .el-input__inner{
  width: 47px;
  height: 17px;
  padding: 2px;
  position: relative;
  bottom: 9px;
}
.input-u3 ::v-deep .el-input__inner{
  width: 47px;
  height: 17px;
  padding: 2px;
  position: relative;
  bottom: 9px;
}
.input-u4 ::v-deep .el-input__inner{
  width: 47px;
  height: 17px;
  padding: 2px;
  position: relative;
  bottom: 9px;
}
.input-u5 ::v-deep .el-input__inner{
   width: 47px;
   height: 17px;
   padding: 2px;
  position: relative;
  bottom: 9px;
 }

::v-deep .el-form-item{
  //margin-bottom: 0;
}
::v-deep .el-input{
  height: 0;
}
::v-deep .el-form-item__content{
  height: 0;

}
</style>
